var myAuctionController;
var init = false;
var container;
function tores(){
    var tmpWid=$(window).width();
    if(tmpWid>1075){
        tmpWid=1075;
    }else{
        var column=Math.floor(tmpWid/58);
        tmpWid=column*358;
    }
    $('.waterfull').width(tmpWid);
}
$(function () {
    myAuctionController = new Vue({
        el:'#myAuctionController',
        data:{
            type:1,
            auctions:[]
        },
        methods:{
            loadData:function(){
                var that = this;
              sy.postApi('/api/userInfo/getMyPawn',{pawnType:that.type},function (data) {
                  that.auctions = data
                  if (that.type == 1){
                      that.calSecond();
                  }
                  Vue.nextTick(function () {
                      var $newElems = $('.item').appendTo(container);
                      $newElems.imagesLoaded(function(){
                          $newElems.animate({ opacity: 1},800);
                          container.masonry( 'appended', $newElems,true);
                      });
                      // container.masonry('reload');
                  });
              })
            },
            setType:function (type) {
                if (this.type != type){
                    this.type = type;
                    this.auctions = [];
                    container.masonry('destory');
                    this.init();
                    this.loadData();
                }

            },
            getImg:function (index) {
                return sy.path+'/static/web/images/waterfull_0'+(index+1)+'.png';
            },
            jump:function (item) {
                if (this.type == 3){
                    location.href = sy.path+'/web/home/makeOrder/'+item.id;
                }else{
                    location.href = sy.path+'/web/auction/'+item.goodsId;
                }

            },
            calSecond:function () {
                if (this.type == 1){
                    var that = this;
                    $.each(that.auctions,function (i,o) {
                        if (o.pawnEndTime){
                            that.$set(o, 'time', DateUtil.formatSecondsToHMS(o.pawnEndTime--));
                        }
                    })
                    setTimeout(function(){
                        that.calSecond();
                    },1000)
                }

            },
            init:function () {
                tores();
                container = $('.waterfull ul');
                container.imagesLoaded(function(){
                    container.masonry({
                        columnWidth: 358,
                        itemSelector : '.item',
                        isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                        isAnimated: true,//是否采用jquery动画进行重拍版
                        isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                        isResizable: true,//是否自动布局默认true
                        animationOptions: {
                            duration: 800,
                            easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                            queue: false//是否队列，从一点填充瀑布流
                        }
                    });
                });
            }
        },
        created:function () {

        },
        mounted:function () {
            var that = this;
            that.init();
            this.loadData();
        },
        updated:function () {
            // var that = this;
            // tores();
            // var container = $('.waterfull ul');
            // if (!init){
            //     init = true;
            //     container.imagesLoaded(function(){
            //         container.masonry({
            //             columnWidth: 358,
            //             itemSelector : '.item',
            //             isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
            //             isAnimated: true,//是否采用jquery动画进行重拍版
            //             isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
            //             isResizable: true,//是否自动布局默认true
            //             animationOptions: {
            //                 duration: 800,
            //                 easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
            //                 queue: false//是否队列，从一点填充瀑布流
            //             }
            //         });
            //     });
            // }else{
            //     container.masonry('reload');
            // }
        }
    });
})